<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平调审核</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-refresh" @click="search">刷新</el-button>
        </el-col>
    </el-row>
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            border>
        <el-table-column
                prop="bfId"
                label="编号"
                width="80">
        </el-table-column>
        <el-table-column
                prop="bfQtySum"
                label="出库数量"
                width="120">
        </el-table-column>
        <el-table-column
                prop="stores.storesName"
                label="原分店"
                width="120">
        </el-table-column>
        <el-table-column
                prop="oldStoresName"
                label="平调分店"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bfMan"
                label="申请人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bfDate"
                label="申请时间"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bfAmount"
                label="总金额"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bfAuditor"
                label="审核人"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bfAuditDate"
                label="审核时间"
                width="120">
        </el-table-column>
        <el-table-column
                prop="bfStatus"
                label="平调状态"
                width="120">
            <template slot-scope="scope">
                <el-button size="mini" type="success" round v-if="scope.row.bfStatus==1">单一平调</el-button>
                <el-button size="mini" type="primary" round v-if="scope.row.bfStatus==2">批量平调</el-button>
            </template>
        </el-table-column>
        <el-table-column
                prop="bfAdtStatus"
                label="审核状态"
                width="120">
            <template slot-scope="scope">
                <el-button size="mini" type="success" round v-if="scope.row.bfAdtStatus==1">通过</el-button>
                <el-button size="mini" type="primary" round v-if="scope.row.bfAdtStatus==2">审核中</el-button>
                <el-button size="mini" type="primary" round v-if="scope.row.bfAdtStatus==3">驳回</el-button>
            </template>
        </el-table-column>
        <el-table-column
                prop=""
                label="操作"
                width="">
            <template slot-scope="scope">
                <el-button type="primary" @click="handleShow(scope.$index, scope.row)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=currentPage
            :page-sizes="[5, 10, 15, 20]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
    </el-pagination>
    <!--弹出层-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="100%">
        <el-table
                ref="multipleTable"
                :data="dialogTableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                border>
            <el-table-column
                    prop="book.bookName"
                    label="图书名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="book.author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="book.publisher"
                    label="出版社"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="book.pubDate"
                    label="出版日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="bookQty"
                    label="出库数量"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="bfMoney"
                    label="总金额"
                    width="120">
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                dialogTableData: [],
                currentPage: 1,
                pageSize: 5,
                total: 0,
                tableData: [],
                searchForm: {},
                form: {},
                title: "",
                dialogFormVisible: false,
                formLabelWidth: '120px'
            }
        },
        created: function () { //初始化方法 类似于jquery  $({})
            this.loadData();
        },
        methods: {
            loadData() {
                //让_this等于当前vue对象
                var _this = this;
                //赋值 axios官网代码
                axios.post('/bookFlat/listPass', {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    data: this.searchForm
                })  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if (response.data.code == 200) {
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;

                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                //再次请求，加载数据
                this.loadData();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                //再次请求，加载数据
                this.loadData();
            },
            search() {
                //直接调用重新请求，加载数据方法
                this.loadData();
            },
            getStatus(row, column, cellValue) {
                //cellValue   status的值
                var returnValue = '';
                if (cellValue == 1) {
                    returnValue = "单个出库"
                } else if (cellValue == 2) {
                    returnValue = '批量出库'
                }
                return cellValue;
            },
            handleShow(index, row) {
                this.dialogFormVisible = true;
                //让_this等于当前vue对象
                var _this = this;
                //alert(111);
                //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                axios.get("/bookFlat/listByBfId?bfId=" + row.bfId)  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success

                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        if (response.data.code == 200) {
                            _this.dialogTableData = response.data.data;
                        }
                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
            }
        }
    })
</script>
</html>